<button
  nz-button
  (click)="handleAdd()"
  [nzLoading]="submitting"
  class="add-btn"
>
  {{ $t('_addRow') }}
</button>

<button
  nz-button
  nzType="primary"
  (click)="handleSubmit()"
  [nzLoading]="submitting"
>
  {{ $t('_save') }}
</button>

<div class="mb-4 !text-red-500 font-bold" *ngIf="!isSelfDevelop">
  {{ $t('_buildTip') }}
</div>

<nz-table #basicTable [nzData]="tagList">
  <thead>
    <tr>
      <th nzWidth="150px">{{ $t('_tagName') }}</th>
      <th nzWidth="160px">{{ $t('_color') }}</th>
      <th nzWidth="150px">{{ $t('_sort') }}</th>
      <th nzWidth="200px">{{ $t('_remark') }}</th>
      <th nzWidth="200px">{{ $t('_action') }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of tagList; index as idx; trackBy: trackByItem">
      <td>
        <input nz-input [(ngModel)]="data.name" maxlength="10" />
      </td>
      <td>
        <input
          type="color"
          [value]="data.color"
          (change)="onColorChange($event, idx)"
        />
        - {{ data.color }}
      </td>
      <td>
        <input nz-input [(ngModel)]="data.sort" maxlength="10" />
      </td>
      <td>
        <div *ngIf="data.isInner">{{ data.desc }}</div>
        <input
          *ngIf="!data.isInner"
          nz-input
          [(ngModel)]="data.desc"
          maxlength="20"
        />
      </td>
      <td>
        <a (click)="moveUp(idx)">{{ $t('_moveUp') }}</a>
        <a (click)="moveDown(idx)" class="mx-2.5">{{ $t('_moveDown') }}</a>
        <a
          *ngIf="!data.isInner"
          nz-popconfirm
          nzOkType="danger"
          [nzPopconfirmTitle]="$t('_confirmDel')"
          nzPopconfirmPlacement="bottom"
          (nzOnConfirm)="handleDelete(idx)"
          class="!text-red-500"
        >
          {{ $t('_del') }}
        </a>
      </td>
    </tr>
  </tbody>
</nz-table>
